<template>
<div class="heander">
    <div class="headBack" ref="headback">

		<el-row class="container">
			<el-col :span="24">
               <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#fff"
                router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-submenu index="/">
                <template slot="title">分类</template>
                    <el-menu-item index="show">show</el-menu-item>
                    <el-menu-item index="info">info</el-menu-item>
                    <!-- <el-menu-item index="2-3">选项3</el-menu-item> -->
                <el-submenu index="2-4">
                <template slot="title" disabled>测试</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="/show">文章</el-menu-item>
            <el-menu-item index="/info">个人中心</el-menu-item>
            <el-menu-item index="/about" >关于我</el-menu-item>
            </el-menu>

            <div class="search">
               
            </div>
            <div v-show=!islogin  class="userInfo">
                <a href="javascript:void(0);" @click="logoinFun(1)">登录</a> |
                <a href="javascript:void(0);" @click="logoinFun(0)">注册</a>
            </div>
            <div v-show=islogin  class="userInfo2">
                <el-avatar style="margin: 10px 0;"> {{getusername}} </el-avatar>
                <a href="javascript:void(0);" @click="loginout">注销</a>
            </div>
			</el-col>
		</el-row>
        
    </div>

    <div class="imgback">
        
        <div class="info">

             <a href="" ><img src="../../static/imgs/p01.jpg" alt=""></a>

            <h3>let's coding coding</h3>
        </div>
    </div>


</div>
</template>

<script>
export default {
    name:"Header",
    data() {
      return {
        activeIndex: '/',
        islogin:false,//登录状态
      };
    },
    methods: {
        handleSelect(key, keyPath) {
            // console.log(key, keyPath);
            console.log("key:"+key);
            console.log("keypath:"+keyPath);
            // this.activeIndex=keyPath
            this.handlelogin();
        },
        handlelogin(){
          this.islogin = (localStorage.getItem('token')===''||localStorage.getItem('token')===null?false:true)
          console.log('登录状态为：'+this.islogin);
        },
        logoinFun: function(msg) { //用户登录和注册跳转
			// console.log(msg);
			localStorage.setItem('logUrl', this.$route.fullPath);
            console.log(this.$route.fullPath);
			// console.log(666,this.$router.currentRoute.fullPath);
			if (msg == 0) {
				this.$router.push({
					path: '/login?login=0'
				});
			} else {
				this.$router.push({
					path: '/login?login=1'
				});
			}
		},
        loginout(){
            // localStorage.setItem("token",'');
            localStorage.removeItem('token')
            this.$store.commit('login',{});
            alert("退出成功！");
            this.islogin=false;
            console.log("此时islogin"+this.islogin);
            // this.$router.push('/');
        },
        handleScroll() {
            // this.$forceUpdate();
        //获取滚动时的高度
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop >= 100 ){
                this.$refs.headback.style.opacity=0.6;
            // document.getElementsByClassName("headBack").style.opacity=0.8;
            }else if(scrollTop<100){
                this.$refs.headback.style.opacity=1;
            }
        }
    },
    computed:{
        loginstate(){
           return this.$store.state.token==null?false:true
           },
        getusername(){
            return this.$store.state.logininfo.username
        }
    },
    mounted() {
      window.addEventListener("scroll",this.handleScroll);
      console.log('$store'+this.$store.state.token);
      this.activerouter = this.$route.path.substr(1)
    },
    destroyed() {
      document.removeEventListener('scroll', this.handleScroll)
      console.log("header销毁了");
    },
    watch: {
		// 如果路由有变化，会再次执行该方法
		'$route': 'handlelogin',
        islogin:function(){
            console.log('登录状态发生变化'+this.islogin);

        }
	},
}
</script>

<style lang="less">
.headBack{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0; 
    background: rgba(40, 42, 44, 0.6);
	/*margin-bottom:30px;*/
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    opacity: 1;
    z-index: 100;
}
.imgback{
    height: 550px;
	position: relative;
	width: 100%;
    background-image: url(https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg);
	background-size: cover;
	background-position: center 50%;
	background-repeat: no-repeat;
    margin-bottom: 10px;
}

.imgback .info{
    position: relative;
    width: 70%;
    height: 120px;
    margin: auto;
    top: 390px;
	padding: 20px 0;
    background:rgba(230, 244, 249, 0.8);
    color: transparent;
    text-shadow: 1px 1px 0 #ff3f1a, -1px -1px 0 #00a7e0;
    
}
.imgback img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

.imgback h3{
    font-size: 35px;
    width: 700;
    font-weight: 400;
    margin-top: 25px;
    
}

.container{
    position: relative;
    
}
.container .userInfo{
    position: absolute;
    right: 30px;
    top: 20px;
    a{
        text-decoration: none;
        color: rgb(245, 240, 240);
        font-size: 14px;
    }
}
.container .userInfo2{
    position: absolute;
    height: 60px;
    right: 30px;
    top: 0px;
    a{
        text-decoration: none;
        margin-left: 15px;
        color: rgb(245, 240, 240);
        font-size: 14px;
        float: right;
        margin-top: 22px;
    }
}
</style>